<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=iso-8859-1" />
    <script type="text/javascript" src="js/jquery-1.4.min.js"></script>
    <script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
    <script>

        $(document).ready(function () {

            //if mouse over and mouse out
            $('.eff').hover(
	function () {

	    value = $(this).find('img').outerHeight() * -1;

	    //for left/right if you have different width and height, 
	    //commented out because we are using up/down in this example
	    //value = $(this).find('img').outerWidth() * -1); 

	    //animate the image
	    // you can change the sliding direction by changing bottom to left, right or top
	    // if you changed this, you will have to change the position of the hover out as well
	    $(this).find('img').stop().animate({ bottom: value }, { duration: 500, easing: 'easeOutBounce' });

	},
	function () {

	    //reset the image
	    // the position property (bottom), it must be same with the on in the mouseover
	    $(this).find('img').stop().animate({ bottom: 0 }, { duration: 500, easing: 'easeOutBounce' });

	});

            //if user clicked on the thumbnail
            $('.eff').click(function () {
                //grab and execute the first link in the thumbnail
                window.location = $(this).find('a:first').attr('href');
            });

        });

    </script>
    <style>
        body { font-family: arial; }
        .eff { width: 136px; height: 136px; position: relative; overflow: hidden; float: left; display: inline; margin: 8px; font-size: 12px; }
        .eff img { display: block; width: 126px; height: 126px; text-decoration: none; border: 4px solid #ccc; background: #ddd; position: absolute; z-index: 500; cursor: pointer; cursor: hand; }
        .eff .caption { width: 126px; height: 126px; background: #333; border: 4px solid #ccc; color: #eee; position: absolute; top: 0; left: 0; z-index: 0; }
        .eff .caption a.header { margin: 10px 5px 5px 5px; display: block; font-size: 14px; font-weight: 700; color: #4ed7f4; }
        .eff .caption p { margin: 5px; }
        .clear { clear: both; }
    </style>
</head>
<body>
    <div class="eff">
        <img src="1.gif" alt="Test 1" title="" width="126" height="126" />
        <div class="caption">
            <a href="http://www.queness.com" class="header">Night Club</a><p>
                Lorem ipsum dolor sit amet, consectetuer adipiscing elit. <a href="test">asd</a></p>
        </div>
    </div>
    <div class="eff">
        <img src="2.gif" alt="Test 1" title="" width="126" height="126" />
        <div class="caption">
            <a href="http://www.queness.com" class="header">Umbrella</a><p>
                Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
        </div>
    </div>
    <div class="eff">
        <img src="3.gif" alt="Test 1" title="" width="126" height="126" />
        <div class="caption">
            <a href="http://www.queness.com" class="header">Maximum</a><p>
                Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
        </div>
    </div>
    <div class="clear">
    </div>
    <div class="eff">
        <img src="4.gif" alt="Test 1" title="" width="126" height="126" />
        <div class="caption">
            <a href="http://www.queness.com" class="header">litle Blackbird</a><p>
                Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
        </div>
    </div>
    <div class="eff">
        <img src="5.gif" alt="Test 1" title="" width="126" height="126" />
        <div class="caption">
            <a href="http://www.queness.com" class="header">infinity crime</a><p>
                Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
        </div>
    </div>
    <div class="eff">
        <img src="6.gif" alt="Test 1" title="" width="126" height="126" />
        <div class="caption">
            <a href="http://www.queness.com" class="header">Indacy</a><p>
                Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
        </div>
    </div>
    <div class="clear">
    </div>
    <div class="eff">
        <img src="7.gif" alt="Test 1" title="" width="126" height="126" />
        <div class="caption">
            <a href="http://www.queness.com" class="header">Moon Balloon</a><p>
                Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
        </div>
    </div>
    <div class="eff">
        <img src="8.gif" alt="Test 1" title="" width="126" height="126" />
        <div class="caption">
            <a href="http://www.queness.com" class="header">Yes Media</a><p>
                Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
        </div>
    </div>
    <div class="eff">
        <img src="9.gif" alt="Test 1" title="" width="126" height="126" />
        <div class="caption">
            <a href="http://www.queness.com" class="header">Balloon Chef</a><p>
                Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
        </div>
    </div>
    <p id="debug">
    </p>
</body>
</html>
